<template>
  <div class="coupon">
    <div class="top">设计师-{{ designerName }}</div>
    <div class="bottom">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="mall" label="使用商城">
          <template slot-scope="scope">
            <div>{{scope.row.shop_id == 1 ? '全球家居1号店' : '欧丽洛雅吴中路商场'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="range" label="使用范围">
          <template slot-scope="scope">
            <div>{{scope.row.type == 1 ? '全场通用' : scope.row.brand_name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="target" label="使用对象">
          <template slot-scope="scope">{{scope.row.user_type == 1 ? '设计师' : '用户'}}</template>
        </el-table-column>
        <el-table-column prop="date" label="有效期">
          <template slot-scope="scope">
            <div>{{scope.row.start_at}}</div>
            <div>{{scope.row.end_at}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div>{{nowDate > new Date(scope.row.end_at).getTime() ? '已过期' : '使用中'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="discount" label="满减">
          <template slot-scope="scope">
            <div>满{{scope.row.discount_limit}}减{{scope.row.discount_money}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="总数量" />
        <el-table-column prop="have_get" label="已领取">
          <template slot-scope="scope">
            <div>
              <span
                class="col-blue"
                @click="$router.push({path: '/designer/coupon-status', query: {status: 0,id:scope.row.id,designerId:id}})"
              >{{ scope.row.have_get }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="have_verify" label="已核销">
          <template slot-scope="scope">
            <div>
              <span
                class="col-blue"
                @click="$router.push({path: '/designer/coupon-status', query: {status: 1,id:scope.row.id,designerId:id}})"
              >{{ scope.row.have_verify }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination class="pagination" :total="total" :cur-page="page" @nextPage="handleNextPage" />
    </div>
  </div>
</template>
<script>
import { getVerificCouponList } from "@/api/http/coupon";
import Pagination from "@/common/pagination";
export default {
  components: {
    Pagination
  },
  props: {
    name: {
      type: String,
      default: "玛丽亚"
    }
  },
  data() {
    return {
      designerName:"",
      id: 0,
      page: 1,
      total: 0,
      nowDate:new Date().getTime(),
      tableData: []
    };
  },
  created() {
    if (this.$route.query.designerId) {
      this.id = this.$route.query.designerId;
      this.getVerificCouponList();
    }
  },
  methods: {
    handleNextPage(page) {
      this.page = page;
      this.getVerificCouponList();
    },
    // 获取已核销优惠券
    getVerificCouponList() {
      getVerificCouponList({ designer_id: this.id, page: this.page }).then(
        res => {
          console.log(res, "---res---77");
          if (res.code == 200) {
            this.tableData = res.data.data;
            this.total = res.data.total;
            this.designerName = res.data.designer_name;
          }
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
@import "@/styles/color.scss";
.top {
  line-height: 44px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-family: Roboto;
  font-weight: bold;
}
</style>
